<template>
  <view style="background-color: #ffffff" class="pt">
    <view v-if="lisData.group_status == 3" class="fail">
      <view
        style="
          padding-top: 40upx;
          display: flex;
          justify-content: space-between;
          padding: 0 30upx;
        "
        class=""
      >
        <view class="xxwz"> 订单号 {{ lisData.Order_sn }} </view>
        <view class="xxwz1">
          {{ lisData.group_status == 1 ? "拼团中" : "拼团成功" }}
        </view>
      </view>
      <view style="display: flex; line-height: 50upx; padding: 0 30upx">
        <text class="jtwz">{{ lisData.Buyer_name }}</text>
        <text class="jtwz2" v-if="lisData.reciver_info">{{
          lisData.reciver_info.mob_phone
        }}</text>
      </view>
      <view class="jtwz3" v-if="lisData.reciver_info">{{
        lisData.reciver_info.address
      }}</view>

      <view style="padding: 30upx; display: flex; box-sizing: border-box">
        <view style="width: 200px" class="">
          <image
            style="width: 170upx; height: 170upx"
            mode="aspectFit"
            :src="lisData.goods_image"
          ></image>
        </view>
        <view style="width: 500upx" class="">
          <view
            style="width: 500upx; display: flex; justify-content: space-between"
          >
            <view style="width: 380upx; line-height: 35upx" class="twoline">
              {{ lisData.goods_name }}
            </view>
            <view style="width: 90upx" class="jtddwz3">
              ￥{{ lisData.goods_price }}
            </view>
          </view>
          <view
            style="width: 500upx; display: flex; justify-content: space-between"
          >
            <view class="jtddwz2"><!-- 黑色;大号 --></view>
            <view class="jtddwz4">x{{ lisData.goods_num }}</view>
          </view>
        </view>
      </view>
      <view style="display: flex; justify-content: space-between">
        <view class="ptwz">拼团信息</view>
        <!-- <view style="padding-right: 30upx;" class="xxwz1">商品已抢购完，金额已原路返还</view> -->
      </view>
      <view class="pttp">
        <view style="" class="">
          <image
            v-if="lisData.avatar_list.length"
            style="width: 120upx; height: 120upx; border-radius: 50%"
            :src="
              lisData.avatar_list[0].avatar || '/static/images/userImg111.png'
            "
          ></image>
          <view class="tuanzhang"> 团长 </view>
        </view>
        <view
          v-if="lisData.avatar_list.length > 0"
          v-for="(item, index) in lisData.avatar_list"
          :key="index"
          class=""
        >
          <view v-if="index > 0" class="">
            <image
              style="width: 120upx; height: 120upx; border-radius: 50%"
              :src="item.avatar || '/static/images/userImg111.png'"
            ></image>
          </view>
        </view>
      </view>
    </view>

    <view
      v-if="lisData.group_status == 2 || lisData.Status == 3"
      class="success"
    >
      <view
        style="
          padding-top: 40upx;
          display: flex;
          justify-content: space-between;
          padding: 0 30upx;
        "
        class=""
      >
        <view class="xxwz"> 订单号 {{ lisData.Order_sn }} </view>
        <view class="xxwz1" v-if="lisData.Status == 6">拼团成功</view>
        <view class="xxwz1" v-if="lisData.Status == 3">已取消</view>
        <view class="xxwz1" v-if="lisData.Status == 4">管理员关闭</view>
        <view class="xxwz1" v-if="lisData.Status == 5">结束</view>
      </view>
      <view style="display: flex; line-height: 50upx; padding: 0 30upx">
        <text class="jtwz">{{ lisData.Buyer_name }}</text>
        <text class="jtwz2" v-if="lisData.reciver_info">{{
          lisData.reciver_info.mob_phone
        }}</text>
      </view>
      <view class="jtwz3" v-if="lisData.reciver_info">{{
        lisData.reciver_info.address
      }}</view>

      <view style="padding: 30upx; display: flex; box-sizing: border-box">
        <view style="width: 200px" class="">
          <image
            style="width: 170upx; height: 170upx"
            mode="aspectFit"
            :src="lisData.goods_image"
          ></image>
        </view>
        <view style="width: 500upx" class="">
          <view
            style="width: 500upx; display: flex; justify-content: space-between"
          >
            <view style="width: 380upx; line-height: 35upx" class="twoline">
              {{ lisData.goods_name }}
            </view>
            <view style="width: 90upx" class="jtddwz3">
              ￥{{ lisData.goods_price }}
            </view>
          </view>
          <view
            style="width: 500upx; display: flex; justify-content: space-between"
          >
            <view class="jtddwz2"></view>
            <view class="jtddwz4">x{{ lisData.goods_num }}</view>
          </view>
        </view>
      </view>
      <view style="display: flex; justify-content: space-between">
        <view class="ptwz">拼团信息</view>
        <!-- <view style="padding-right: 30upx;" class="xxwz1">商品已抢购完，金额已原路返还</view> -->
      </view>
      <!-- 拼团图片 -->
      <view class="pttp">
        <view style="" class="" v-if="lisData.avatar_list.length">
          <image
            style="width: 120upx; height: 120upx; border-radius: 50%"
            :src="
              lisData.avatar_list[0].avatar || '/static/images/userImg111.png'
            "
          ></image>
          <view class="tuanzhang"> 团长 </view>
        </view>
        <view
          v-if="lisData.avatar_list.length > 0"
          v-for="(item, index) in lisData.avatar_list"
          :key="index"
          class=""
        >
          <view v-if="index > 0" class="">
            <image
              style="width: 120upx; height: 120upx; border-radius: 50%"
              :src="item.avatar || '/static/images/userImg111.png'"
            ></image>
          </view>
        </view>
      </view>
      <view @click="toOrderDetail()" class="pdkwz"> 查看订单详情 </view>
    </view>

    <view
      v-if="
        lisData.group_status == 1 &&
        lisData.Status != 3 &&
        lisData.Status != 4 &&
        lisData.Status != 5
      "
      class="ing"
    >
      <view class="ptwz">拼团信息</view>
      <!-- 拼团图片 -->
      <view class="pttp">
        <view style="" class="" v-if="lisData.avatar_list.length">
          <image
            style="width: 120upx; height: 120upx; border-radius: 50%"
            :src="
              lisData.avatar_list[0].avatar || '/static/images/userImg111.png'
            "
          ></image>
          <view class="tuanzhang"> 团长 </view>
        </view>
        <view
          v-if="lisData.avatar_list.length > 0"
          v-for="(item, index) in lisData.avatar_list"
          :key="index"
          class=""
        >
          <view v-if="index > 0" class="">
            <image
              style="width: 120upx; height: 120upx; border-radius: 50%"
              :src="item.avatar || '/static/images/userImg111.png'"
            ></image>
          </view>
        </view>
      </view>

      <view v-cloak class="xqwz1">
        剩余 <text>{{ limitFormatTime2(allMiao) }}</text> 结束
      </view>
      <view class="xqwz2">
        还差<text> {{ lisData.need_num }} </text>人拼成，赶快分享吧
      </view>
      <!-- #ifdef APP-PLUS || H5-->
      <view @click="share" class="pdkwz"> 邀请小伙伴拼单 </view>
      <!-- #endif -->
      <!-- #ifdef MP-WEIXIN -->
      <button open-type="share" class="pdkwz">邀请小伙伴拼单</button>
      <!-- #endif -->

      <uin-share ref="share"></uin-share>
      <view @click="back()" class="pdkwz1">我不慌~先逛逛</view>

      <view
        style="
          padding-top: 40upx;
          display: flex;
          justify-content: space-between;
          padding: 0 30upx;
        "
        class=""
      >
        <view class="xxwz"> 订单号 {{ lisData.Order_sn }} </view>
        <view class="xxwz1"> 进行中 </view>
      </view>
      <view style="display: flex; line-height: 50upx; padding: 0 30upx">
        <text class="jtwz">{{ lisData.Buyer_name }}</text>
        <text class="jtwz2" v-if="lisData.reciver_info">{{
          lisData.reciver_info.mob_phone
        }}</text>
      </view>
      <view class="jtwz3" v-if="lisData.reciver_info">{{
        lisData.reciver_info.address
      }}</view>

      <view style="padding: 30upx; display: flex; box-sizing: border-box">
        <view style="width: 200px" class="">
          <image
            style="width: 170upx; height: 170upx"
            mode="aspectFit"
            :src="lisData.goods_image"
          ></image>
        </view>
        <view style="width: 500upx" class="">
          <view
            style="width: 500upx; display: flex; justify-content: space-between"
          >
            <view style="width: 380upx; line-height: 35upx" class="twoline">
              {{ lisData.goods_name }}
            </view>
            <view style="width: 90upx" class="jtddwz3">
              ￥{{ lisData.goods_price }}
            </view>
          </view>
          <view
            style="width: 500upx; display: flex; justify-content: space-between"
          >
            <view class="jtddwz2"></view>
            <view class="jtddwz4">x{{ lisData.goods_num }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import uinShare from "@/components/uni-share/index.vue";
// #ifdef H5
const share = require("@/store/share.js");
// #endif
export default {
  components: { uinShare },
  data() {
    return {
      order_id: 0,
      lisData: [],
      allMiao: "1586483436",
      SpellGroup_sn: "",
      goods_id: 0,
    };
  },
  onShareAppMessage() {
    return {
      title: this.lisData.goods_name,
      path:
        "/mall/goods/info?goods_id=" +
        this.goods_id +
        "&pageFrom=share&SpellGroup_sn=" +
        this.SpellGroup_sn,
      imageUrl: this.lisData.goods_image,
    };
  },
  onLoad(options) {
    this.SpellGroup_sn = options.SpellGroup_sn;
    this.$util
      .request({
        url: "/mobile/index.php?act=spellgroup&op=activity_detail",
        method: "get",
        data: {
          SpellGroup_sn: this.SpellGroup_sn,
        },
      })
      .then((res) => {
        this.lisData = res.datas.info;
        this.goods_id = res.datas.info.goods_id;
        this.order_id = res.datas.info.order_id;
        this.allMiao = res.datas.info.left_time;
        // #ifdef H5
        let shareInfo = {
          title: "皖集采", // 分享标题
          desc: this.lisData.goods_name, // 分享描述
          link:
            this.$share +
            "/?#/mall/goods/info?goods_id=" +
            this.goods_id +
            "&pageFrom=share&SpellGroup_sn=" +
            this.SpellGroup_sn, // 分享链接
          imgUrl: this.lisData.goods_image, // 分享图标
        };
        share.share(shareInfo);
        // #endif
      });
    this.timer1 = setInterval(() => {
      this.allMiao--;
      if (this.allMiao == 0) {
        clearInterval(that.timer1);
      }
    }, 1000);
  },
  // onShareAppMessage(res) {
  // 	return {
  // 		title:"皖集采",
  // 		path:"/pages/distribution/shopInfo?goods_id="+this.goods_id+"&pageFrom=share&SpellGroup_sn="+this.SpellGroup_sn,
  // 		imageUrl: this.lisData.goods_image
  // 	}
  // },
  methods: {
    toOrderDetail() {
      uni.navigateTo({
        url: "/member/order/orderInfo?order_id=" + this.order_id,
      });
      // pages/Transaction_management/orderInfo
    },
    back() {
      uni.navigateBack({
        delta: 2,
      });
    },
    share() {
      // #ifdef H5
      this.shareFlag = false;
      uni.showModal({
        content: "请使用右上角分享或前往app分享",
      });
      // #endif
      // #ifdef APP-PLUS
      let shareInfo = {
        href:
          this.$share +
          "/#/mall/goods/info?goods_id=" +
          this.goods_id +
          "&pageFrom=share&SpellGroup_sn=" +
          this.SpellGroup_sn,
        title: "皖集采",
        desc: this.lisData.goods_name,
        imgUrl: this.lisData.goods_image,
      };
      let url =
        "/mall/goods/info?goods_id=" +
        this.goods_id +
        "&pageFrom=share&SpellGroup_sn=" +
        this.SpellGroup_sn;
      uni.setStorageSync("url", url);
      this.$refs.share.shareInfo(shareInfo);
      // #endif
    },
    share2() {},

    limitFormatTime2(data) {
      var that = this;
      var chazhi = data;
      setInterval(function () {
        chazhi--;
      }, 1000);
      if (chazhi < 0) {
        chazhi = 0;
      }
      var d = Math.floor(chazhi / 3600 / 24);
      var h = Math.floor((chazhi / 3600) % 24);
      var m = Math.floor((chazhi % 3600) / 60);
      var s = Math.floor((chazhi % 3600) % 60);
      if (h < 10) {
        h = "0" + h;
      }
      if (m < 10) {
        m = "0" + m;
      }
      if (s < 10) {
        s = "0" + s;
      }
      return h + ":" + m + ":" + s;
    },
  },
};
</script>

<style>
.ptwz {
  font-size: 30upx;
  padding: 0 30upx;
}

.pttp > view {
  margin: 0 10upx;
}

.tuanzhang {
  box-sizing: border-box;
  width: 80upx;
  height: 40upx;
  text-align: center;
  line-height: 40upx;
  background-color: #fea405;
  margin-left: 20upx;
  position: relative;
  margin-top: -20px;
  border-radius: 30upx;
  text-shadow: 1upx 1upx 1upx rgba(255, 255, 255, 0.22);
  -webkit-box-shadow: 1upx 1upx 1upx rgba(0, 0, 0, 0.29),
    inset 1upx 1upx 1upx rgba(255, 255, 255, 0.44);
  -moz-box-shadow: 1upx 1upx 1upx rgba(0, 0, 0, 0.29),
    inset 1upx 1upx 1upx rgba(255, 255, 255, 0.44);
  box-shadow: 1upx 1upx 1upx rgba(0, 0, 0, 0.29),
    inset 1upx 1upx 1upx rgba(255, 255, 255, 0.44);
}

.xqwz1 {
  width: 100%;
  margin-top: 60upx;
  font-size: 30upx;
  text-align: center;
}
.xqwz1 text {
  color: #ff4300;
}
.xqwz2 {
  color: #333333;
  font-weight: 400;
  text-align: center;
  font-size: 30upx;
  line-height: 30upx;
}
.xqwz2 text {
  color: #ff4300;
}
.pdkwz {
  width: 640upx;
  height: 90upx;
  line-height: 90upx;
  background-color: #ff4300;
  font-size: 32upx;
  text-align: center;
  color: #ffffff;
  margin: 40upx auto;
}
.pdk1 {
  width: 640upx;
  height: 90upx;
  margin-top: 50upx;
  background-color: #ffffff;
  margin-left: auto;
  margin-right: auto;
}
.pdkwz1 {
  border: 5upx solid #ff4300;
  width: 640upx;
  height: 90upx;
  line-height: 90upx;
  font-size: 32upx;
  text-align: center;
  margin: 20upx auto;
  color: #ff4300;
}

.xxwz {
  font-size: 33upx;
}

.xxwz1 {
  color: #ff4300;
  font-size: 33upx;
}
.jtwz {
  font-size: 35upx;
}
.jtwz2 {
  padding-left: 20upx;
  color: #b0b0b0;
  font-size: 22upx;
}
.jtwz3 {
  margin-top: 10upx;
  padding: 0 30upx;
  line-height: 40upx;
  font-size: 30upx;
}
.jtddwz2 {
  font-size: 22upx;
  color: #b0b0b0;
}
.jtddwz3 {
  text-align: right;
  font-size: 24upx;
  color: #ff4300;
}
.jtddwz4 {
  font-size: 22upx;
  color: #b0b0b0;
}
.jtddwz {
  width: 500upx;
  margin-top: 70upx;
  margin-left: 30upx;
  float: left;
}
.twoline {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pttp {
  display: flex;
  justify-content: center;
  padding-top: 30upx;
  width: 750upx;
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}
</style>
